<template>
  <div class="box4" ref="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './china.json'
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
  let myCharts = echarts.init(map.value)
  myCharts.setOption({
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.3,
      top: '150px',
      label: {
        show: true,
        color: 'white',
      },
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'blue', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#125bb2', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      emphasis: {
        itemStyle: {
          color: 'yellowgreen',
        },
        label: {
          fontSize: 20,
        },
      },
    },
    series: {
      type: 'lines',
      lineStyle: {
        curveness: 0.2, //航线的弯曲程度
      },

      data: [
        {
          coords: [
            [117.501364, 40.636569], // 起点
            [113.594461, 22.228864], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [113.594461, 22.228864], // 起点
            [117.501364, 40.636569], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [120.153576, 30.287459], // 起点
            [87.617733, 43.792818], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [87.617733, 43.792818], // 起点
            [120.153576, 30.287459], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [101.778916, 36.623178], // 起点
            [112.982279, 28.19409], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [112.982279, 28.19409], // 起点
            [101.778916, 36.623178], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [96, 36.855756], // 起点
            [108.7944, 23.833381], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
        {
          coords: [
            [108.7944, 23.833381], // 起点
            [96, 36.855756], // 终点
          ],
          lineStyle: {
            color: 'white',
            width: 2,
          },
        },
      ],
      effect: {
        show: true,
        symbol:
          'path://M700.065799 373.027761q116.507301 104.243374 209.508743 189.068865 39.857761 35.769785 77.671534 71.028574t67.451595 63.36362 47.522715 47.011718 17.884893 21.972868l0 61.319632q0 4.087975-17.884893-1.532991t-47.522715-17.373896-67.451595-27.593834-77.671534-33.214801q-93.001442-40.879755-209.508743-95.04543l0 193.156841q26.571841 19.417883 50.077699 37.813773 20.439877 15.329908 40.879755 30.148819t31.68181 22.994862q13.28592 9.197945 15.329908 18.906887t2.043988 22.994862l0 34.747791q0 8.175951-16.862899 10.730936t-40.368758-8.686948q-11.241933-6.131963-40.879755-18.39589t-63.36362-26.571841-64.896611-26.571841-46.500721-18.39589q-2.043988 0-3.576979-0.510997t-3.576979-0.510997-3.576979 0.510997-3.576979 0.510997q-15.329908 6.131963-46.500721 18.39589t-64.896611 26.571841-63.36362 26.571841-40.879755 18.39589q-23.505859 11.241933-40.368758 8.686948t-16.862899-10.730936l0-34.747791q0-13.28592 2.043988-22.994862t15.329908-18.906887q11.241933-8.175951 31.68181-22.994862t40.879755-30.148819q23.505859-18.39589 50.077699-37.813773l0-193.156841q-117.529295 54.165675-210.530737 95.04543-39.857761 17.373896-77.160537 33.214801t-66.940598 27.593834-47.522715 17.373896-17.884893 1.532991l0-61.319632q0-3.065982 17.884893-21.972868t47.522715-47.011718 66.940598-63.36362 77.160537-71.028574q93.001442-84.825491 210.530737-189.068865l0-231.992608q0-34.747791 10.219939-58.764647t25.549847-39.346764 33.214801-23.505859 33.725798-12.263926 26.060844-4.598972 11.241933-0.510997l10.219939 0q11.241933 1.021994 27.082837 5.109969t33.725798 12.263926 33.214801 23.505859 25.549847 39.346764 10.219939 58.764647l0 231.992608z',
        color: '#fff',
        symbolSize: 20,
        trailLength: 0,
        roundTrip: true,
      },
    },
  })
})
</script>

<style scoped lang="scss"></style>
